<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>maitown</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/common/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="static/common/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/common/font-awesome/css/font-awesome.min.css">
  <script src="static/common/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script src="static/common/layui/layui.js" charset="utf-8"></script>
  <style>
      *{
            list-style: none;
            margin: 0px;
            padding: 0px;
      }
      body,html{
        background-color: #F2F2F2;
        position: relative;
        width: 100%;
        height: 100%;
      }
      .container_wrap{
            position: absolute;
            margin-top: 0;
            padding:0;
            right: 0;
            width: 100%;
            height: 100%;
            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
      }

      /*导航条*/
      .nav_wrap{
            text-align: right;
      }
      .nav_wrap .layui-nav{
            border-radius: 0;
            margin-bottom: 0;
      }
      .layui-nav-item .title{
            font-size: 25px;
            font-weight: 300;
            letter-spacing: 3px;
            color: #C5C4C2;
      }
      .nav_left{
            float: left;
            margin-left: 40px;
      }
      .layui-nav-item>input{
            background: #2E3139;
            border: #393D49;
            color: #97989C;
      }
      /*背景图部分*/
      .bg_wrap{
            height: 600px;
      }
      .bg {
            background: url('static/system/img/main_bg.jpg');
            width: 100%;
            height:100%;  
      }
      .bg-blur {
            position: relative;
            top: -6px;
            float: left;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
      }
      .layui-card{
            width: 360px;
            padding: 30px;
            border: 1px solid #d2d2d2;
            border-radius: 0;
            height: 220px;
            padding-right: 35px;
            margin-left: 50%;
            position: relative;
            left: -180px;
      }
      .layui-card-header{
            font-size: 20px;
            text-align: center;
            border-bottom:1px solid #d2d2d2;
      }
      .main_icon,.main_icon .layui-icon{
            font-size: 200px;
            text-align: center;
      }
      .main_content,.main_content>span,.btn_wrap{
            color: #DAD6CE;
            font-size: 48px;
            font-weight: 100;
            text-align: center;
      }
      .btn_item{
            padding: 0 65px;
            height: 60px;
            background: none;
            color: #DAD6CE;
            font-size: 27px;
            border: 1px solid #D2D2D2;
            margin-top: 50px;
      }
      .btn_item:hover{
            border-color:#D2D2D2;
            color: #5A4C20;
            border-radius: 30px;
            background: #EEEEEE;
      }
      /*底部*/
      .footer_wrap{
            width: 100%;
            text-align: center;
            margin-top: 40px;
            /*position: absolute;
            bottom: 0;*/
      }
      span,span>a{
            text-decoration: none;
            color:#7D7D7D;
      }
      .footer_wrap .footer_item{
            margin-top: 15px;
      }
  </style>
</head>
<body>
    <div class="layui-container container_wrap">
        <div class="nav_wrap">
            <ul class="layui-nav">
                <div class="nav_left">
                    <li class="layui-nav-item">    
                        <span class="title">且听书吟</span>
                    </li>
                    <li class="layui-nav-item">
                        <input type="text" placeholder="搜索组件或模块" value="" class="layui-input">
                    </li>
                </div>
                <li class="layui-nav-item">
                    <a href="">控制台<span class="layui-badge">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;"><img id="mmm" src="static/system/img/head_img/head.jpg" class="layui-nav-img"></a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="bg_wrap">
            <div class="bg bg-blur">
                    <div class="main_icon">
                        <i class="layui-icon" style="color: #fff; color: rgba(255,255,255,.7);"></i>
                    </div>
                    <div class="main_content">
                        <span>返璞归真的漫漫征途</span>
                    </div>
                    <div class="btn_wrap">
                        <button class="layui-btn layui-btn-primary layui-btn-lg btn_item">点此进入</button>
                    </div>
                    
            </div>
        </div>
        <div class="layui-row">
            <div style="padding: 20px; background-color: #F2F2F2;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header">返璞归真</div>
                            <div class="layui-card-body">
                                    身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header">双面体验</div>
                            <div class="layui-card-body">
                                    拥有双面的不仅是人生。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-card">
                            <div class="layui-card-header">星辰大海</div>
                            <div class="layui-card-body">
                                    
                                    如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。待，秋风萧瑟时，散作满天星辰，你看那四季轮回，正是不灭的执念。
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
        <div class="footer_wrap">
                <span>© 2018 team.com MIT license</span>
                <p class="footer_item">
                <span><a href="#" target="_blank">案例</a></span>
                <span><a href="#" target="_blank">支持</a></span>
                <span><a href="#" site-event="contactInfo">联系</a></span>
                <span><a href="#" target="_blank" rel="nofollow">GitHub</a></span>
                <span><a href="#" target="_blank" rel="nofollow">码云</a></span>
                <span><a href="#" target="_blank">微信公众号</a></span>
                <span><a href="#" target="_blank" rel="nofollow">xxxx</a></span>
                </p>
        </div>
    </div>
</body>
<script type="text/javascript">
   $(document).ready(function(){
      var url = '/user_module/main';
      fetch(url, {
        method: 'GET',
        headers: new Headers({
          'Content-Type': 'application/json;charset=utf-8'
        })
      }).then(res => res.json()).catch(error => console.error(error))
      .then(function(response){
          $('#mmm').html(response.data.uName);
      });

   });
</script>
</html>